import { reactive } from 'vue';
import { getBannerApi, getRecommendListApi } from '@/api/request';
import  ProImage  from '@/components/ProImage';
import './index.scss';


const Recommend = ({
    name: 'recommend',
    setup() {
        // 本地state
        const state = reactive({
            bannerList: [],
            recommendList: [],
        });
        // 初始请求
        const initPage = () => {
            getBannerApi().then(res => {
                res.code === 200 &&  Object.assign(state,{
                    bannerList: res.banners
                })
            })
            getRecommendListApi().then(res => {
                res.code === 200 && Object.assign(state,{
                    recommendList: res.result
                })
            })
        };
        // created时请求
        initPage();
        // 渲染间隔
        const renderSpace = () => {
            return (
                <div className='spaceTitle'>
                    推荐歌单
                </div>
            )
        };
        // 渲染轮播图
        const renderSwipe = () => {
            return (
                <van-swipe autoplay={3000} indicator-color="#d44439">
                    {
                        state.bannerList.map(item => {
                            return (
                                <van-swipe-item key={item.encodeId} class="swipeImg">
                                    <ProImage src={item.imageUrl} alt="轮播图" />
                                </van-swipe-item>
                            )
                        })
                    }
                </van-swipe>
            )
        };
        // 渲染列表
        const renderRecommendList = () => {
            return (
                <div className="recommendList">
                    {
                        state.recommendList.map((item) => {
                            return (
                                <div className="recommendItem" key={item.id}>
                                    <div className="imgSize">
                                        <ProImage src={item.picUrl} alt='推荐列表' />
                                    </div>
                                    <div className="desc">
                                        {item.name}
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            )
        };
        return() => (
            <div className="recommendPage">
                { renderSwipe() }
                { renderSpace() }
                { renderRecommendList() }
            </div>
        )
    },

});

export default Recommend;